import { TaskDataDTO } from "@/api/task/types"
import {
  ElCol,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
} from "element-plus"
import { Component, PropType } from "vue"

export default defineComponent({
  props: {
    data: {
      type: Object as PropType<TaskDataDTO>,
      default: null,
    },
    modelValue: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
  setup(props, ctx) {
    const { modelValue, data } = toRefs(props)

    const formState = ref<Partial<TaskDataDTO>>({
      taskName: "",
      taskLeader: "",
      taskLevel: 0,
      taskType: "0",
      taskStatus: "0",
      jobType: "web",
      startTime: Date.now(),
      endTime: Date.now() + 1000 * 60 * 60,
      progress: 0,
      remarks: "",
      description: "",
      groupLeader: "",
      workload: 0,
      weekTime: 1,
    })

    const formColumn: Array<{
      label: string
      prop: keyof TaskDataDTO
      formCom?: Component
      formType?: "input" | "textarea" | "select" | "datePicker" | "jobType"
      formTypeOpt?: unknown
      span?: number
    }> = [
      {
        label: "任务名称",
        prop: "taskName",
        span: 24,
      },
      {
        label: "任务类型",
        prop: "taskType",
      },
      {
        label: "任务优先级",
        prop: "taskLevel",
      },
      {
        label: "任务负责人",
        prop: "taskLeader",
      },
      {
        label: "小组负责人",
        prop: "groupLeader",
      },
      {
        label: "任务开始时间",
        prop: "startTime",
        formType: "datePicker",
      },
      {
        label: "任务结束时间",
        prop: "endTime",
        formType: "datePicker",
      },
      {
        label: "任务岗位",
        prop: "jobType",
        formType: "jobType",
      },
      {
        label: "任务描述",
        prop: "remarks",
        formCom: <ElInput v-model={formState.value.remarks} />,
        formType: "textarea",
        formTypeOpt: {
          rows: 6,
        },
        span: 24,
      },
    ]

    return () => (
      <ElDialog modelValue={modelValue.value}>
        <ElRow>{}</ElRow>
        <ElForm>
          <ElRow>
            {formColumn.map((item) => {
              return (
                <ElCol span={item.span ?? 12}>
                  <ElFormItem prop={item.prop}>{item.formCom}</ElFormItem>
                </ElCol>
              )
            })}
          </ElRow>
        </ElForm>
      </ElDialog>
    )
  },
})
